<template>
<div>
  <section class="detailBan" @click="picShow">
     <img class="picImg" src="http://img1.qunarzz.com/sight/p0/1902/84/84696f368bbec10da3.img.jpg_600x330_5ca3e181.jpg" />
     <div class="bannerInfo">
        <p class="bannerTit">北京世界园艺博览会</p>
        <p class="bannerIcon"><i class="iconfont picIcon">&#xe692;</i> 9</p>
     </div>
  </section>
  <Gallary :picArr="picArr" v-show="showGallary"  @close="picClose"></Gallary>
</div>
</template>

<script>
import Gallary from 'common/gallary/gallary'
export default {
  name: 'DetailBan',
  data () {
    return {
      showGallary: false,
      picArr: [
        'http://img1.qunarzz.com/sight/p0/1602/45/459bd3d00321a44790.water.jpg_r_800x800_523d81a9.jpg',
        'http://img1.qunarzz.com/sight/p0/1602/a4/a4a36f2daf4a2a8990.water.jpg_r_800x800_4b04bc71.jpg',
        'http://img1.qunarzz.com/sight/p0/1501/96/9658f2acc6e30c4c.water.jpg_r_800x800_a9f958a8.jpg']
    }
  },
  methods: {
    picShow () {
      this.showGallary = true
    },
    picClose () {
      this.showGallary = false
    }
  },
  components: {
    Gallary
  }
}
</script>

<style lang="stylus" scoped>
.detailBan
   position:relative
   overflow:hidden
   height:0
   padding-bottom:55%
   .picImg
      width:100%
   .bannerInfo
      display:flex
      position:absolute
      left:0
      right:0
      bottom:0
      line-height:0.6rem
      background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
      .bannerTit
         flex:1
         color:#fff
         fong-size:0.32rem
         padding:0 .2rem
      .bannerIcon
         line-height:0.32rem
         height:0.32rem
         margin-top: .1rem
         padding:0 .4rem
         border-radius: .2rem
         font-size:0.26rem
         background: rgba(0,0,0,0.8)
         color:#fff
         .picIcon
            font-size:0.26rem
</style>
